import { ThemeVarService } from '../../lib/abstract/style/theme_var/service'
import { IconService } from '../../lib/icons'
import { ICON_IDS } from '../../lib/icons/types/constants'
import { BODY_UNIQUE_ID, PROJECT_PREFIX } from './base'
import { InlinePseudoStylesService } from './styles/inline_pseudo'

export const EXTERNAL_LINK_DOMAINS: string[] = ['*.greasyfork.org']

export const MODULE_CONFIG: any = {
  PREFIX: {
    icon: 'icon-',
  },
  COMPONENTS: {
    navigator: {
      classNameGenerator: (id: string): string => `${PROJECT_PREFIX}-${id}`,
      selector: (id: string): string => `.${PROJECT_PREFIX}-${id}`,
      baseClass: `navigator`,
    },
    navbar: {
      height: '60px',
    },
    pageLoader: {
      id: 'mbf-page-loader',
      selector: `#mbf-page-loader`,
    },
    pageSeparator: {
      class: 'mbf-page-separator',
      selector: `.mbf-page-separator`,
    },
    messageAlert: {
      id: 'message-alert',
      selector: `#message-alert`,
    },
    superSearch: {
      id: 'super-search-menu',
      selector: `#super-search-menu`,
    },
  },
  MODULES: {
    ScriptNavigator: {
      id: 'script-navigator',
      height: '160px',
      width: '1200px',
      transform: 'translateX(-50%)',
      selector: `.${PROJECT_PREFIX}-script-navigator`,
    },
    AnswerNavigator: {
      class: `${PROJECT_PREFIX}-answer-navigator`,
      selector: `.${PROJECT_PREFIX}-answer-navigator`,
    },
  },
  PLATFORM: {
    greasyFork: {
      navbarId: 'greasy-fork-navbar',
      toolbarId: {
        script: 'script-toolbar',
        feedback: 'feedback-toolbar',
      },
      filterId: {
        feedback: 'feedback-filter',
      },
    },
  },
  PAGE: {
    body: {
      id: BODY_UNIQUE_ID,
      data: {
        hide: {
          type: 'data-hide-type',
        },
        theme: {
          id: 'theme',
        },
        project: {
          module: `data-${PROJECT_PREFIX}-module-element`,
          alert: `data-${PROJECT_PREFIX}-alert-element`,
          isSupported: 'data-is-supported',
          isLoggedIn: 'data-logged-in',
          hasSelection: 'data-has-selection',
          selectionMade: 'data-selection-made',
          url: `${PROJECT_PREFIX}-final-url`,
          pageType: `data-page-type`,
          processedElement: 'data-processed-element',
          linkContent: 'data-content',
          linkType: 'data-link-type',
          floorNumber: 'data-floor',
        },
        mark: {
          element: 'data-mark-element',
        },
        search: {
          isMultiColumn: 'data-search-is-multi-column',
          processedColumns: 'data-processed-columns',
          processedWidth: 'data-processed-width',
          processedTitle: 'data-processed-title',
          processedMeta: 'data-processed-meta',
          processedStyle: 'data-processed-style',
          processedHighlight: 'data-processed-highlight',
          hideHistory: 'data-hide-history',
          hideSuggestions: 'data-hide-suggestions',
          hideHotLists: 'data-hide-hotlists',
          isHistoryEmpty: 'data-empty-history',
          isSuggestionsEmpty: 'data-empty-suggestions',
        },
      },
      styleVar: {
        scrollbarOffset: '--scrollbar-offset',
        rootFontSize: '--root-font-size',
      },
      config: {
        hideElement: 'is-hidden',
        hideAd: 'ad-removed-hidden',
        noDecoration: 'no-decoration',
        hasCustomHidden: 'has-custom-hidden',
        hasToolbar: 'has-toolbar',
        scriptIcon: 'script-icon',
        noWrap: 'no-wrap',
        collapsed: 'collapsed',
        expanded: 'expanded',
        fullWidth: 'full-width',
        isEmpty: 'is-empty',
        emailHighlight: `email-highlight`,
        scrollHighlight: 'scroll-highlight',
        overflowVisible: 'overflow-visible',
        isMobile: 'is-mobile',
        isDesktop: 'is-desktop',
        mobileExpanded: 'mobile-expanded',
        fileUploaded: 'file-uploaded',
        isMine: 'is-mine',
        read: `read`,
        noRead: 'no-read',
        // 页面
        pageIframe: `${PROJECT_PREFIX}-page-iframe`,
        // 拖拽类
        dragWrapper: `${PROJECT_PREFIX}-drag-wrapper`,
        dragContainer: `drag-container`,
        dragArea: `drag-area`,
        dragIcon: `drag-icon`,
        dragNoSelection: `drag-no-selection`,
        // 壁纸类
        wallpaperContainer: `${PROJECT_PREFIX}-wallpaper-container`,
        wallpaperMask: `wallpaper-mask`,
        hasWallpaper: 'has-wallpaper',
        // 序号类
        indexContainer: `${PROJECT_PREFIX}-index-wrapper`,
        indexNumber: `index-number`,
        // 弹窗类
        serviceInitAlert: `service-init-alert`,
        // 徽章类
        badgeContainer: 'badge-container',
        badgeProminent: 'badge-prominent',
        badgeLabel: 'badge-label',
        // 徽章类-角色
        badgeRoleAuthor: 'author',
        badgeRoleOriginalPoster: 'original-poster',
        badgeRoleMine: 'mine',
        // 对话
        chatLeft: 'chat-left',
        chatRight: 'chat-right',
        // 头像
        avatarContainer: `avatar-container`,
        // 图标类
        linkIcon: `${PROJECT_PREFIX}-link-icon`,
        // 消息类
        alertSuccess: `${PROJECT_PREFIX}-alert-success`,
        alertWarning: `${PROJECT_PREFIX}-alert-warning`,
        alertDanger: `${PROJECT_PREFIX}-alert-danger`,
        alertInfo: `${PROJECT_PREFIX}-alert-info`,
        // 搜索元数据类
        searchMetaContainer: `${PROJECT_PREFIX}-search-meta-container`,
        searchMetaSource: `search-meta-source`,
        searchMetaTime: `search-meta-time`,
        // 搜索按钮类
        searchButtonFollow: `search-meta-follow`,
        // 搜索元素类
        searchContainer: `${PROJECT_PREFIX}-search-container`,
        searchBox: `search-box`,
        searchHistory: `search-history`,
        searchSuggestions: `search-suggestions`,
        searchSimilarQueries: `search-similar-queries`,
        searchAIAnswer: `search-ai-answer`,
        searchHeaderUserCenter: `search-header-user-center`,
        searchResultItems: `search-result-items`,
        searchItemImage: `search-item-image`,
        searchNoResultTip: `search-no-result-tip`,
        searchTip: `search-tip`,
        // 搜索高亮
        searchHighlightClass: `search-highlight`,
        searchHighlightTag: `em`,
        // 搜索项宽度
        searchItemDynamicWidth: 'clamp(350px, 35vw, 90vw)',
        searchItemWidthForBaidu: '390px',
        searchItemWidthForBing: '350px',
        searchItemWidthForSo: '300px',
        searchItemWidthForSoGou: '200px',
        searchItemWidth: '600px',
        // Z-index
        asideZIndex: '10',
        headerZIndex: '20',
        // 事件
        eventWrapper: 'event-wrapper',
        eventContainer: 'event-container',
        eventTime: 'event-time',
        // 搜狗搜索
        shortVideoHotList: 'short-video-hot-list',
        sogouChinese: 'sogou-chinese',
        sogouImage: 'sogou-image',
        sogouDownload: 'sogou-download',
        featuredVideos: 'featured-videos',
        sogouEncyclopedia: 'sogou-encyclopedia',
        sogouAsk: 'sogou-ask',
        movie: 'movie',
        news: 'news',
        // 谷歌搜索
        googleLink: 'google-link',
        googleLinkContainer: 'google-link-container',
        googleLinkDetailButton: 'google-link-detail-button',
        // 油叉
        greasyForkScriptMetaContainer: 'script-meta-container',
      },
    },
  },
  URL: {
    greasyFork: {
      scriptSearchUrl: 'https://greasyfork.org/zh-CN/scripts',
      searchBySiteUrl: 'https://greasyfork.org/zh-CN/scripts/by-site/%s',
      feedbackUrl: 'https://greasyfork.org/zh-CN/scripts/%s/feedback',
    },
  },
}

/**
 * 页面 body 类名类型
 */
export type BodyClassType
  = | 'NO_DECORATION'
    | 'HAS_CUSTOM_HIDDEN'
    | 'HAS_TOOLBAR'
    | 'SCRIPT_ICON'
    | 'NO_WRAP'
    | 'IS_COLLAPSED'
    | 'IS_EXPANDED'
    | 'FULL_WIDTH'
    | 'IS_EMPTY'
    | 'EMAIL_HIGHLIGHT'
    | 'SCROLL_HIGHLIGHT'
    | 'OVERFLOW_VISIBLE'
    | 'IS_MOBILE'
    | 'IS_DESKTOP'
    | 'MOBILE_EXPANDED'
    | 'FILE_UPLOADED'
    | 'IS_MINE'
    | 'READ'
    | 'NO_READ'
    | 'INDEX_CONTAINER'
    | 'INDEX_NUMBER'
    | 'SERVICE_INIT_ALERT'
    | 'CHAT_LEFT'
    | 'CHAT_RIGHT'
    | 'AVATAR_CONTAINER'
    | 'PAGE_IFRAME'

/**
 * 页面body类名管理常量
 * 集中管理所有应用到 body 元素的类名，避免分散定义
 */
export const BodyClasses: Record<BodyClassType, string> = {
  // 页面
  PAGE_IFRAME: MODULE_CONFIG.PAGE.body.config.pageIframe,
  /** 无装饰类 */
  NO_DECORATION: MODULE_CONFIG.PAGE.body.config.noDecoration,
  /** 有隐藏类 */
  HAS_CUSTOM_HIDDEN: MODULE_CONFIG.PAGE.body.config.hasCustomHidden,
  /** 有工具栏类 */
  HAS_TOOLBAR: MODULE_CONFIG.PAGE.body.config.hasToolbar,
  /** 有图标类 */
  SCRIPT_ICON: MODULE_CONFIG.PAGE.body.config.scriptIcon,
  /** 禁止换行类 */
  NO_WRAP: MODULE_CONFIG.PAGE.body.config.noWrap,
  /** 折叠状态类 */
  IS_COLLAPSED: MODULE_CONFIG.PAGE.body.config.collapsed,
  /** 展开状态类 */
  IS_EXPANDED: MODULE_CONFIG.PAGE.body.config.expanded,
  /** 全屏宽度类 */
  FULL_WIDTH: MODULE_CONFIG.PAGE.body.config.fullWidth,
  /** 空状态类 */
  IS_EMPTY: MODULE_CONFIG.PAGE.body.config.isEmpty,
  /** 邮箱高亮类 */
  EMAIL_HIGHLIGHT: MODULE_CONFIG.PAGE.body.config.emailHighlight,
  /** 滚动高亮类 */
  SCROLL_HIGHLIGHT: MODULE_CONFIG.PAGE.body.config.scrollHighlight,
  /** 强制显示溢出内容类 */
  OVERFLOW_VISIBLE: MODULE_CONFIG.PAGE.body.config.overflowVisible,
  /** 移动端类 */
  IS_MOBILE: MODULE_CONFIG.PAGE.body.config.isMobile,
  /** 桌面端类 */
  IS_DESKTOP: MODULE_CONFIG.PAGE.body.config.isDesktop,
  /** 移动端展开类 */
  MOBILE_EXPANDED: MODULE_CONFIG.PAGE.body.config.mobileExpanded,
  /** 文件上传类 */
  FILE_UPLOADED: MODULE_CONFIG.PAGE.body.config.fileUploaded,
  /** 我的类 */
  IS_MINE: MODULE_CONFIG.PAGE.body.config.isMine,
  /** 已读类 */
  READ: MODULE_CONFIG.PAGE.body.config.read,
  /** 未读类 */
  NO_READ: MODULE_CONFIG.PAGE.body.config.noRead,
  /** 序号类 */
  INDEX_CONTAINER: MODULE_CONFIG.PAGE.body.config.indexContainer,
  INDEX_NUMBER: MODULE_CONFIG.PAGE.body.config.indexNumber,
  /** 弹窗 */
  SERVICE_INIT_ALERT: MODULE_CONFIG.PAGE.body.config.serviceInitAlert,
  // 对话
  CHAT_LEFT: MODULE_CONFIG.PAGE.body.config.chatLeft,
  CHAT_RIGHT: MODULE_CONFIG.PAGE.body.config.chatRight,
  // 头像
  AVATAR_CONTAINER: MODULE_CONFIG.PAGE.body.config.avatarContainer,
}

export type ModuleClassType = 'SCRIPT_NAVIGATOR' | 'ANSWER_NAVIGATOR'
export const ModuleClasses: Record<ModuleClassType, Record<string, string>> = {
  SCRIPT_NAVIGATOR: MODULE_CONFIG.MODULES.ScriptNavigator,
  ANSWER_NAVIGATOR: MODULE_CONFIG.MODULES.AnswerNavigator,
}

/**
 * 壁纸类
 */
export type WallpaperClassType = 'CONTAINER' | 'MASK' | 'EXISTS'
export const WallpaperClasses: Record<WallpaperClassType, string> = {
  CONTAINER: MODULE_CONFIG.PAGE.body.config.wallpaperContainer,
  MASK: MODULE_CONFIG.PAGE.body.config.wallpaperMask,
  EXISTS: MODULE_CONFIG.PAGE.body.config.hasWallpaper,
}

/**
 * 徽章类
 */
export type BadgeClassType = 'CONTAINER' | 'PROMINENT' | 'LABEL' | 'ROLE_AUTHOR' | 'ROLE_ORIGINAL_POSTER' | 'ROLE_MINE'
export const BadgeClasses: Record<BadgeClassType, string> = {
  CONTAINER: MODULE_CONFIG.PAGE.body.config.badgeContainer,
  PROMINENT: MODULE_CONFIG.PAGE.body.config.badgeProminent,
  LABEL: MODULE_CONFIG.PAGE.body.config.badgeLabel,
  ROLE_AUTHOR: MODULE_CONFIG.PAGE.body.config.badgeRoleAuthor,
  ROLE_ORIGINAL_POSTER: MODULE_CONFIG.PAGE.body.config.badgeRoleOriginalPoster,
  ROLE_MINE: MODULE_CONFIG.PAGE.body.config.badgeRoleMine,
}

/**
 * 图标类
 */
export type IconClassType = 'LINK_ICON'
export const IconClasses: Record<IconClassType, string> = {
  LINK_ICON: MODULE_CONFIG.PAGE.body.config.linkIcon,
}

/**
 * 拖拽类
 */
export type DragClassType = 'WRAPPER' | 'CONTAINER' | 'AREA' | 'ICON' | 'NO_SELECTION'
export const DragClasses: Record<DragClassType, string> = {
  WRAPPER: MODULE_CONFIG.PAGE.body.config.dragWrapper,
  CONTAINER: MODULE_CONFIG.PAGE.body.config.dragContainer,
  AREA: MODULE_CONFIG.PAGE.body.config.dragArea,
  ICON: MODULE_CONFIG.PAGE.body.config.dragIcon,
  NO_SELECTION: MODULE_CONFIG.PAGE.body.config.dragNoSelection,
}

/**
 * 隐藏类
 */
export type HideClassType = 'ELEMENT' | 'AD'
export const HideClasses: Record<HideClassType, string> = {
  ELEMENT: MODULE_CONFIG.PAGE.body.config.hideElement,
  AD: MODULE_CONFIG.PAGE.body.config.hideAd,
}

/**
 * 消息类
 */
export type StatusClassType = 'IS_COLLAPSED' | 'IS_EXPANDED' | 'IS_EMPTY'
export const StatusClasses: Record<StatusClassType, string> = {
  // 是否折叠
  IS_COLLAPSED: MODULE_CONFIG.PAGE.body.config.collapsed,
  // 是否展开
  IS_EXPANDED: MODULE_CONFIG.PAGE.body.config.expanded,
  // 是否为空
  IS_EMPTY: MODULE_CONFIG.PAGE.body.config.isEmpty,
}

/**
 * 消息类
 */
export type AlertClassType = 'SUCCESS' | 'WARNING' | 'DANGER' | 'INFO'
export const AlertClasses: Record<AlertClassType, string> = {
  SUCCESS: MODULE_CONFIG.PAGE.body.config.alertSuccess,
  WARNING: MODULE_CONFIG.PAGE.body.config.alertWarning,
  DANGER: MODULE_CONFIG.PAGE.body.config.alertDanger,
  INFO: MODULE_CONFIG.PAGE.body.config.alertInfo,
}

/**
 * 搜索类
 */
export type SearchClassType
  = | 'META_CONTAINER'
    | 'META_SOURCE'
    | 'META_TIME'
    | 'BUTTON_FOLLOW'
    | 'SEARCH_CONTAINER'
    | 'SEARCH_BOX'
    | 'SEARCH_HISTORY'
    | 'SEARCH_SUGGESTIONS'
    | 'SIMILAR_SIMILAR_QUERIES'
    | 'SEARCH_AI_ANSWER'
    | 'SEARCH_HEADER_USER_CENTER'
    | 'SEARCH_RESULT_ITEMS'
    | 'SEARCH_ITEM_IMAGE'
    | 'SEARCH_NO_RESULT_TIP'
    | 'SEARCH_TIP'
    | 'HIGHLIGHT_CLASS'
export const SearchClasses: Record<SearchClassType, string> = {
  META_CONTAINER: MODULE_CONFIG.PAGE.body.config.searchMetaContainer,
  META_SOURCE: MODULE_CONFIG.PAGE.body.config.searchMetaSource,
  META_TIME: MODULE_CONFIG.PAGE.body.config.searchMetaTime,
  BUTTON_FOLLOW: MODULE_CONFIG.PAGE.body.config.searchButtonFollow,
  SEARCH_CONTAINER: MODULE_CONFIG.PAGE.body.config.searchContainer,
  SEARCH_BOX: MODULE_CONFIG.PAGE.body.config.searchBox,
  SEARCH_HISTORY: MODULE_CONFIG.PAGE.body.config.searchHistory,
  SEARCH_SUGGESTIONS: MODULE_CONFIG.PAGE.body.config.searchSuggestions,
  SIMILAR_SIMILAR_QUERIES: MODULE_CONFIG.PAGE.body.config.searchSimilarQueries,
  SEARCH_AI_ANSWER: MODULE_CONFIG.PAGE.body.config.searchAIAnswer,
  SEARCH_HEADER_USER_CENTER: MODULE_CONFIG.PAGE.body.config.searchHeaderUserCenter,
  SEARCH_RESULT_ITEMS: MODULE_CONFIG.PAGE.body.config.searchResultItems,
  SEARCH_ITEM_IMAGE: MODULE_CONFIG.PAGE.body.config.searchItemImage,
  SEARCH_NO_RESULT_TIP: MODULE_CONFIG.PAGE.body.config.searchNoResultTip,
  SEARCH_TIP: MODULE_CONFIG.PAGE.body.config.searchTip,
  HIGHLIGHT_CLASS: MODULE_CONFIG.PAGE.body.config.searchHighlightClass,
}
// 搜索值
export type SearchValueType = 'HIGHLIGHT_TAG' | 'ITEM_DYNAMIC_WIDTH' | 'ITEM_WIDTH_FOR_BAI_DU' | 'ITEM_WIDTH_FOR_BING' | 'ITEM_WIDTH_FOR_SO' | 'ITEM_WIDTH_FOR_SO_GOU' | 'ITEM_WIDTH' | 'Z_ASIDE' | 'Z_HEADER'
export const SearchValues: Record<SearchValueType, string> = {
  HIGHLIGHT_TAG: MODULE_CONFIG.PAGE.body.config.searchHighlightTag,
  ITEM_DYNAMIC_WIDTH: MODULE_CONFIG.PAGE.body.config.searchItemDynamicWidth,
  // 搜索项宽度
  ITEM_WIDTH_FOR_BAI_DU: MODULE_CONFIG.PAGE.body.config.searchItemWidthForBaidu,
  ITEM_WIDTH_FOR_BING: MODULE_CONFIG.PAGE.body.config.searchItemWidthForBing,
  ITEM_WIDTH_FOR_SO: MODULE_CONFIG.PAGE.body.config.searchItemWidthForSo,
  ITEM_WIDTH_FOR_SO_GOU: MODULE_CONFIG.PAGE.body.config.searchItemWidthForSoGou,
  ITEM_WIDTH: MODULE_CONFIG.PAGE.body.config.searchItemWidth,
  // z-index
  Z_ASIDE: MODULE_CONFIG.PAGE.body.config.asideZIndex,
  Z_HEADER: MODULE_CONFIG.PAGE.body.config.headerZIndex,
}
// 搜索属性
export type SearchAttrType
  = | 'HIGHLIGHT_TAG'
    | 'IS_MULTI_COLUMN'
    | 'PROCESSED_COLUMNS'
    | 'PROCESSED_WIDTH'
    | 'PROCESSED_TITLE'
    | 'PROCESSED_META'
    | 'PROCESSED_STYLE'
    | 'PROCESSED_HIGHLIGHT'
    | 'HIDE_HISTORY'
    | 'HIDE_SUGGESTIONS'
    | 'HIDE_HOT_LISTS'
    | 'IS_HISTORY_EMPTY'
    | 'IS_SUGGESTIONS_EMPTY'
export const SearchAttrs: Record<SearchAttrType, string> = {
  HIGHLIGHT_TAG: MODULE_CONFIG.PAGE.body.config.searchHighlightTag,
  IS_MULTI_COLUMN: MODULE_CONFIG.PAGE.body.data.search.isMultiColumn,
  PROCESSED_COLUMNS: MODULE_CONFIG.PAGE.body.data.search.processedColumns,
  PROCESSED_WIDTH: MODULE_CONFIG.PAGE.body.data.search.processedWidth,
  PROCESSED_TITLE: MODULE_CONFIG.PAGE.body.data.search.processedTitle,
  PROCESSED_META: MODULE_CONFIG.PAGE.body.data.search.processedMeta,
  PROCESSED_STYLE: MODULE_CONFIG.PAGE.body.data.search.processedStyle,
  PROCESSED_HIGHLIGHT: MODULE_CONFIG.PAGE.body.data.search.processedHighlight,
  // 隐藏
  HIDE_HISTORY: MODULE_CONFIG.PAGE.body.data.search.hideHistory,
  HIDE_SUGGESTIONS: MODULE_CONFIG.PAGE.body.data.search.hideSuggestions,
  HIDE_HOT_LISTS: MODULE_CONFIG.PAGE.body.data.search.hideHotLists,
  // 是否为空
  IS_HISTORY_EMPTY: MODULE_CONFIG.PAGE.body.data.search.isHistoryEmpty,
  IS_SUGGESTIONS_EMPTY: MODULE_CONFIG.PAGE.body.data.search.isSuggestionsEmpty,
}

export type EventClassType = 'WRAPPER' | 'CONTAINER' | 'TIME'
export const EventClasses: Record<EventClassType, string> = {
  WRAPPER: MODULE_CONFIG.PAGE.body.config.eventWrapper,
  CONTAINER: MODULE_CONFIG.PAGE.body.config.eventContainer,
  TIME: MODULE_CONFIG.PAGE.body.config.eventTime,
}

/**
 * 搜狗类名
 */
export type SogouClassType
  = | 'SHORT_VIDEO_HOT_LIST'
    | 'SOGOU_CHINESE'
    | 'SOGOU_IMAGE'
    | 'SOGOU_DOWNLOAD'
    | 'FEATURED_VIDEOS'
    | 'SOGOU_ENCYCLOPEDIA'
    | 'SOGOU_ASK'
    | 'MOVIE'
    | 'NEWS'
export const SogouClasses: Record<SogouClassType, string> = {
  SHORT_VIDEO_HOT_LIST: MODULE_CONFIG.PAGE.body.config.shortVideoHotList,
  SOGOU_CHINESE: MODULE_CONFIG.PAGE.body.config.sogouChinese,
  SOGOU_IMAGE: MODULE_CONFIG.PAGE.body.config.sogouImage,
  SOGOU_DOWNLOAD: MODULE_CONFIG.PAGE.body.config.sogouDownload,
  FEATURED_VIDEOS: MODULE_CONFIG.PAGE.body.config.featuredVideos,
  SOGOU_ENCYCLOPEDIA: MODULE_CONFIG.PAGE.body.config.sogouEncyclopedia,
  SOGOU_ASK: MODULE_CONFIG.PAGE.body.config.sogouAsk,
  MOVIE: MODULE_CONFIG.PAGE.body.config.movie,
  NEWS: MODULE_CONFIG.PAGE.body.config.news,
}

/**
 * 谷歌类名
 */
export type GoogleClassType = 'LINK' | 'LINK_CONTAINER' | 'LINK_DETAIL_BUTTON'
export const GoogleClasses: Record<GoogleClassType, string> = {
  LINK: MODULE_CONFIG.PAGE.body.config.googleLink,
  LINK_CONTAINER: MODULE_CONFIG.PAGE.body.config.googleLinkContainer,
  LINK_DETAIL_BUTTON: MODULE_CONFIG.PAGE.body.config.googleLinkDetailButton,
}

/**
 * 油叉类名
 */
export type GreasyForkClassType = 'SCRIPT_META_CONTAINER'
export const GreasyForkClasses: Record<GreasyForkClassType, string> = {
  SCRIPT_META_CONTAINER: MODULE_CONFIG.PAGE.body.config.greasyForkScriptMetaContainer,
}

/**
 * 工具类样式
 */
export interface AppClassesType {
  Body: Record<BodyClassType, string>
  Module: Record<ModuleClassType, Record<string, string>>
  Hide: Record<HideClassType, string>
  Wallpaper: Record<WallpaperClassType, string>
  Drag: Record<DragClassType, string>
  Badge: Record<BadgeClassType, string>
  Icon: Record<IconClassType, string>
  Status: Record<StatusClassType, string>
  Alert: Record<AlertClassType, string>
  Search: {
    class: Record<SearchClassType, string>
    value: Record<SearchValueType, string>
    attr: Record<SearchAttrType, string>
  }
  Event: Record<EventClassType, string>
  Sogou: Record<SogouClassType, string>
  Google: Record<GoogleClassType, string>
  GreasyFork: Record<GreasyForkClassType, string>
}

export const AppStyleCollections: AppClassesType = {
  Body: { ...BodyClasses },
  Module: { ...ModuleClasses },
  Hide: { ...HideClasses },
  Wallpaper: { ...WallpaperClasses },
  Drag: { ...DragClasses },
  Badge: { ...BadgeClasses },
  Icon: { ...IconClasses },
  Status: { ...StatusClasses },
  Alert: { ...AlertClasses },
  Search: {
    class: {
      ...SearchClasses,
    },
    value: {
      ...SearchValues,
    },
    attr: {
      ...SearchAttrs,
    },
  },
  Event: { ...EventClasses },
  Sogou: { ...SogouClasses },
  Google: { ...GoogleClasses },
  GreasyFork: { ...GreasyForkClasses },
}

/**
 * 工具类样式
 */
export const HIDE_CLASS_STYLE: string = `
.${AppStyleCollections.Hide.AD} {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.${AppStyleCollections.Hide.ELEMENT} {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
`
export const TOOL_CLASS_STYLES: string = `
${HIDE_CLASS_STYLE}

.${BodyClasses.PAGE_IFRAME} {
  position: fixed !important;
  top: -1000px !important;
  left: -1000px !important;
  width: 1px !important;
  height: 1px !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

.${BodyClasses.NO_WRAP} {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.${BodyClasses.EMAIL_HIGHLIGHT} {
  color: #dc3545 !important;
  font-weight: bold;
  background-color: #fff5f5 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  border: 1px solid #f5c6cb !important;
}

.${BodyClasses.OVERFLOW_VISIBLE} {
  overflow: visible !important;
}

.${AppStyleCollections.Alert.SUCCESS} {
  color: var(--${PROJECT_PREFIX}-theme-success-text) !important;
}

.${AppStyleCollections.Alert.DANGER} {
  color: var(--${PROJECT_PREFIX}-theme-danger-text) !important;
}

.${AppStyleCollections.Alert.WARNING} {
  color: var(--${PROJECT_PREFIX}-theme-warning-text) !important;
}

.${AppStyleCollections.Alert.INFO} {
  color: var(--${PROJECT_PREFIX}-theme-info-text) !important;
}
`
/**
 * 徽章类样式
 */
export const BADGE_CLASS_STYLES: string = `
  .${AppStyleCollections.Badge.CONTAINER} {
    display: flex !important;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin-right: 5px !important;
    
    .${AppStyleCollections.Badge.PROMINENT} {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 4px 8px;
      border-radius: 12px;
      width: fit-content;
      
      .${AppStyleCollections.Badge.LABEL} {
        font-size: 12px !important;
        font-weight: 600;
        color: #ffffff !important;
      }
    }
  }
`

/**
 * 搜索元数据类样式
 */
export const SEARCH_META_CLASS_STYLES: string = `
.${AppStyleCollections.Search.class.META_CONTAINER} {
  box-sizing: border-box !important;
  position: absolute !important;
  bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%!important;
  gap: 6px;
  color: #666;
  padding: 3px 10px;
  left: 0 !important;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  
  .${AppStyleCollections.Search.class.META_SOURCE}.${BodyClasses.SCRIPT_ICON}::before,
  .${AppStyleCollections.Search.class.META_TIME}::before {
    ${InlinePseudoStylesService.getInstance().icon({ backgroundImageId: ICON_IDS.time.clock })}
  }
  
  .${AppStyleCollections.Search.class.META_SOURCE}, .${AppStyleCollections.Search.class.META_TIME} {
    display: inline-flex !important;
    align-items: center;
  }
  
  .${AppStyleCollections.Search.class.META_SOURCE} {
    margin-right: auto !important;
    order: 1 !important;
    
    ${IconService.getInstance().api.icons.videoSource.map(item => `
      &.${MODULE_CONFIG.PREFIX.icon}${item.id}::before {
        background-image: var(${ThemeVarService.getInstance().generateIcon(item.id)}) !important;
      }
    `).join('\n')}
  }
  
  .${AppStyleCollections.Search.class.META_TIME} {
    margin-left: auto !important;
    order: 2 !important;
  }
}
`

/**
 * 拖拽句柄类样式
 */
export const DRAG_HANDLE_CLASS_STYLES: string = `
.${AppStyleCollections.Drag.WRAPPER} {
  .${AppStyleCollections.Drag.CONTAINER} {
    position: relative !important;
    padding-right: 24px !important;
    
    .${AppStyleCollections.Drag.ICON} {
      cursor: move; /* 拖拽样式 */
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      width: 16px !important;
      height: 16px !important;
      background: #c7254e;
      mask: radial-gradient(circle at 3px 3px, #000 30%, transparent 30%) 0 0/6px 6px;
      
      &[data-position="left"] {
        right: auto !important;
        left: 0 !important;
      }
    }
  }
}
`

/**
 * 链接图标样式
 */
export const LINK_ICON_CLASS_STYLES: string = `
.${AppStyleCollections.Icon.LINK_ICON} {
  &::before {
    ${InlinePseudoStylesService.getInstance().icon()}
  }
  
  ${IconService.getInstance().api.icons.link.map(item => `
    &.${MODULE_CONFIG.PREFIX.icon}${item.id}::before {
      background-image: var(${ThemeVarService.getInstance().generateIcon(item.id)}) !important;
    }
  `).join('\n')}
}
`

/**
 * 页面 body 属性类型
 */
export type BodyAttrType
  = | 'PROJECT_MODULE'
    | 'PROJECT_ALERT'
    | 'IS_SUPPORTED'
    | 'IS_LOGGED_IN'
    | 'HIDE_TYPE'
    | 'HAS_SELECTION'
    | 'SELECTION_MADE'
    | 'FINAL_URL'
    | 'MARK_ELEMENT'
    | 'PAGE_TYPE'
    | 'PROCESSED_ELEMENT'
    | 'LINK_CONTENT'
    | 'LINK_TYPE'
    | 'FLOOR_NUMBER'
export const BodyAttrs: Record<BodyAttrType, string> = {
  /** 项目模块属性 */
  PROJECT_MODULE: MODULE_CONFIG.PAGE.body.data.project.module,
  /** 项目弹窗模块属性 */
  PROJECT_ALERT: MODULE_CONFIG.PAGE.body.data.project.alert,
  /** 是否支持当前平台属性 */
  IS_SUPPORTED: MODULE_CONFIG.PAGE.body.data.project.isSupported,
  /** 用户登录状态属性 */
  IS_LOGGED_IN: MODULE_CONFIG.PAGE.body.data.project.isLoggedIn,
  /** 隐藏类型属性 */
  HIDE_TYPE: MODULE_CONFIG.PAGE.body.data.hide.type,
  /** 是否有选择属性 */
  HAS_SELECTION: MODULE_CONFIG.PAGE.body.data.project.hasSelection,
  /** 是否已选择过属性 */
  SELECTION_MADE: MODULE_CONFIG.PAGE.body.data.project.selectionMade,
  /** 最终 URL 属性 */
  FINAL_URL: MODULE_CONFIG.PAGE.body.data.project.url,
  /** 标识元素属性 */
  MARK_ELEMENT: MODULE_CONFIG.PAGE.body.data.mark.element,
  /** 页面类型属性 */
  PAGE_TYPE: MODULE_CONFIG.PAGE.body.data.project.pageType,
  /** 已处理元素属性 */
  PROCESSED_ELEMENT: MODULE_CONFIG.PAGE.body.data.project.processedElement,
  /** 链接内容属性 */
  LINK_CONTENT: MODULE_CONFIG.PAGE.body.data.project.linkContent,
  /** 链接类型属性 */
  LINK_TYPE: MODULE_CONFIG.PAGE.body.data.project.linkType,
  /** 楼层号属性 */
  FLOOR_NUMBER: MODULE_CONFIG.PAGE.body.data.project.floorNumber,
}

/**
 * 获取所有消息类选择器
 */
export function getAllAlertSelector(): string {
  return Object.values(AppStyleCollections.Alert).map(item => `.${item}`).join(',')
}

/**
 * 获取所有隐藏类选择器
 */
export function getAllHideSelector(): string {
  return Object.values(AppStyleCollections.Hide).map(item => `.${item}`).join(',')
}

/**
 * 生成隐藏选择器
 */
export function generateHideSelector(selector: string): string {
  return `${selector}.${AppStyleCollections.Hide.ELEMENT}, ${selector}.${AppStyleCollections.Hide.AD}, ${selector}[${BodyAttrs.HIDE_TYPE}]`
}
